<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS Load JSON</title>
    <style>
    table {
        border-collapse: collapse;
    }
    
    td, th {
        border: 1px solid black;
    }
    </style>
</head>
<body>
    <p>Search by First Name</p>
    <input type="text" name="" id="searchName">
    <br />
    <input type="button" value="GO" id="btn">
    <br>
    <br>
   <table id="output">
        
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>

   
    
    </table>
    <script src="./data.js"></script>
    <script>
        document.getElementById("btn").onclick = function(){
            var myTable = document.getElementById("output");
            

            var clientInput = document.getElementById("searchName").value;
            if (clientInput == "" ) {
                alert("Input can not be empty.");
            };
            obj = JSON.parse(text);
            for (i=0; i<obj.employees.length; i++){
                if(clientInput == obj.employees[i].firstName){
                    var tr = document.createElement("tr");
                    var td = document.createElement("td");
                    td.innerHTML = obj.employees[i].firstName;
                    tr.appendChild(td);
                    td = document.createElement("td");
                    td.innerHTML = obj.employees[i].lastName;
                    tr.appendChild(td);
                    myTable.appendChild(tr);
                };
            };

        }
    
    
    </script>
    
</body>
</html>